<template>
    <div>
        <el-form :model="form" :inline="true" class="mb-2">
            <el-form-item label="工人编码" prop="deviceCode">
                <el-input v-model="form.workerTypeCode" placeholder="请输入班组编码"></el-input>
            </el-form-item>
            <el-form-item label="工人名称" prop="deviceName">
                <el-input v-model="form.workerTypeName" placeholder="请输入班组名称"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status" style="width: 150px;">
                <el-select v-model="form.workerTypeStatus" placeholder="请选择">
                    <el-option label="启用" value="启用"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form>
        <el-button type="primary" @click="tk.IsAdd = true" class="mr-2">新增</el-button>
        <el-button type="success" @click="tk.IsUpdate = true" class="mr-2">修改</el-button>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="100" />
            <el-table-column label="工种编码" prop="workerTypeCode"></el-table-column>
            <el-table-column label="工种名称" prop="workerTypeName"></el-table-column>
            <el-table-column label="系数" prop="xiShu"></el-table-column>
            <el-table-column label="排序" prop="workerTypeOrder"></el-table-column>
            <el-table-column label="状态" prop="workerTypeStatus">
                <template #default="scope">
                    <el-switch v-model="scope.row.workerTypeStatus" @change="handleStatusChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="创建者" prop="createName"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime">
                <template #default="scope">
                    {{ scope.row.updateTime ? scope.row.updateTime.substring(0, 10) : "" }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="upd(scope.row)">修改</el-button>
                    <el-button type="text" @click="del(scope.row.workerTypeId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="tk.IsAdd" title="新增工人" :draggable="true" width="500" append-to-body>
            <el-form :model="bd" label-width="80px">

                <el-form-item label="工人编号">
                    <el-input v-model="bd.workerTypeCode" disabled />
                </el-form-item>

                <el-form-item label="工人名称">
                    <el-input v-model="bd.workerTypeName" />
                </el-form-item>

                <el-form-item label="系数">
                    <el-input v-model="bd.xiShu" />
                </el-form-item>

                <el-form-item label="排序">
                    <el-input v-model="bd.workerTypeOrder" />
                </el-form-item>

                <el-form-item label="状态">
                    <el-select v-model="bd.workerTypeStatus">
                        <el-option label="启用" value="启用" />
                        <el-option label="禁用" value="禁用" />
                    </el-select>
                </el-form-item>

            </el-form>
            <template #footer>
                <el-button @click="tk.IsAdd = false">取消</el-button>
                <el-button type="primary" @click="Save">确定</el-button>
            </template>
        </el-dialog>

        <el-dialog v-model="tk.IsUpdate" title="更新工人" :draggable="true" width="500" append-to-body>
            <el-form :model="bd" label-width="80px">

                <el-form-item label="工人编号">
                    <el-input v-model="bd.workerTypeCode" disabled />
                </el-form-item>

                <el-form-item label="工人名称">
                    <el-input v-model="bd.workerTypeName" />
                </el-form-item>

                <el-form-item label="系数">
                    <el-input v-model="bd.xiShu" />
                </el-form-item>

                <el-form-item label="排序">
                    <el-input v-model="bd.workerTypeOrder" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="bd.workerTypeStatus">
                        <el-option label="启用" value="启用" />
                        <el-option label="禁用" value="禁用" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="tk.IsUpdate = false">取消</el-button>
                <el-button type="primary" @click="update">修改</el-button>
            </template>
        </el-dialog>

        <!-- 分页区域 -->
        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
            :page-sizes="[5, 10, 15, 20]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="page.TotalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { getTsBuildInfoEmitOutputFilePath } from 'typescript';
import { KongaUrl } from '@/axios/axiosHelp';
// 定义表单数据
const form = ref({
    "workerTypeCode": "",
    "workerTypeName": "",
    "workerTypeStatus": "",
});

const bd = reactive({
    "workerTypeId": 0,
    "workerTypeCode": "",
    "workerTypeName": "",
    "xiShu": "",
    "workerTypeOrder": 0,
    "workerTypeStatus": "",
    "createName": "",
    "updateTime": "2025-05-05"
})

const generateCode = () => {
    const characters = "0123456789";
    let result = "";
    for (let i = 0; i < 12; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result; // 添加返回语句
}


// 处理状态改变事件
const handleStatusChange = (bd: any) => {
    // 这里可以调用后端 API 来更新设备状态
    // 模拟更新成功
    ElMessage.success(`设备 ${bd.workerTypeName} 状态已更新为 ${bd.workerTypeStatus ? '启用' : '禁用'}`);
};

//弹框
const tk = reactive({
    //新增
    IsAdd: false,
    //编辑
    IsUpdate: false,
})

// 定义表格数据
const tableData = ref([])

// 定义分页数据
//分页
const page = reactive({
    PageIndex: 1,
    PageSize: 15,
    TotalCount: 0,
    PageCount: 0,
})
//分页
const handleSizeChange = (index: any) => {
    page.PageSize = index
    search()
}
const handleCurrentChange = (index: any) => {
    page.PageIndex = index;
    search()
}


// 显示方法
const search = () => {
    KongaUrl.get("/gongzhongdu/api/WorkerType/GetWorker", {
        params: {
            workerTypeCode: form.value.workerTypeCode,
            workerTypeName: form.value.workerTypeName,
            workerTypeStatus: form.value.workerTypeStatus,
            PageIndex: page.PageIndex,
            PageSize: page.PageSize
        }
    }).then(res => {
        tableData.value = res.data.data
        page.TotalCount = res.data.totalCount
        page.PageCount = res.data.pageCount
    })
};

onMounted(() => {
    search();
    bd.workerTypeCode = generateCode();
})

// 重置方法
const reset = () => {
    form.value = {
        workerTypeCode: '',
        workerTypeName: '',
        workerTypeStatus: ''
    };
    search();
};

// 新增方法
const Save = () => {
    KongaUrl.post("/gongzhongxie/api/WorkerType/AddWorker", bd).then(res => {
        if (res.data.code == 200) {
            search();
            tk.IsAdd = false;
            ElMessage.success("添加成功");
        }
        else {
            ElMessage.error("添加失败");
        }
    })
}
//返填
const upd = (row: any) => {
    bd.workerTypeId = row.workerTypeId,
        bd.workerTypeCode = row.workerTypeCode,
        bd.workerTypeName = row.workerTypeName,
        bd.workerTypeOrder = row.workerTypeOrder,
        bd.workerTypeStatus = row.workerTypeStatus,
        bd.createName = row.createName,
        bd.updateTime = row.updateTime,
        //修改弹框
        tk.IsUpdate = true
}
// 修改方法
const update = (row: any) => {
    KongaUrl.post("/gongzhongxie/api/WorkerType/UpdateWorker", bd).then(res => {
        if (res.data.code == 400) {
            ElMessage.success(res.data.msg)
            tk.IsUpdate = false
            search()
        }
        else {
            ElMessage.error(res.data.msg)
            return
        }
    })
}

// 删除方法
const del = (workerTypeId: any) => {
    console.log(workerTypeId)
    ElMessageBox.confirm("是否确认删除?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
    }).then(() => {
        KongaUrl.post("/gongzhongxie/api/WorkerType/DeletedWorker", {
            params: {
                WorkerTypeId: workerTypeId
            }
        }).then((res) => {
            if (res.data.code == 300) {
                ElMessage.success(res.data.msg);
                search();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
    });
};
// 多选按钮存入数据
const selectedRows = ref<any[]>([]); // 存储选中行的数据

// 多选事件回调
const handleSelectionChange = (rows: any[]) => {
    selectedRows.value = rows; // 将选中的行数据保存到变量中
};


const processClick = (row: any) => {
    ElMessage.success("操作成功");
}

</script>

<style scoped>
.mb-2 {
    margin-bottom: 10px;
}

.mr-2 {
    margin-right: 10px;
}
</style>